<div class="highlights-container">
    <button type="button" class="btn btn-default refresh" ng-click="refreshAll()">
        <span class="glyphicon glyphicon-refresh"></span>
    </button>
    <h4 ng-click="setActivePane(1)" class="container-header">Recommended</h4>
    <div ng-repeat="video in all_recommendations.slice(0, 8) track by $index" class="video-container">
        <img ng-src="{{posterURL(video[0])}}" alt="video" class="thumbnail" ng-click='watch(video[0])'/>
        <div>
            <div class="video-title">{{getShowName(video[0].title, 25)}}</div>
            <div class="video-metadata">about <span style="font-weight:bold">{{video[0].topic}}</span></div>
        </div>
        <br ng-show="($index + 1) % 4 == 0" />
    </div>
    <div ng-show="all_recommendations.length === undefined || all_recommendations.length === 0">
        There are currently no video recommendations..
    </div>
</div>
<hr class="content-separator" />
<div class="highlights-container">
    <h4 ng-click="setActivePane(3)" class="container-header">Suggested Interests</h4>
    <div ng-repeat="interest in all_interests.slice(0, 8) track by $index" class="interests-container">
        <div class="thumbnail interest-thumbnail" ng-click="explore(interest[0])">
            <img ng-src="{{interest[0].thumbnail}}" alt="img" class="thumbnail-img"/>
        </div>
        <div>
            <div class="interest-title">{{getShowName(interest[0].name, 15)}}</div>
            <!--<div class="interest-metadata">about <span style="font-weight:bold">{{video.topic}}</span></div>-->
        </div>
        <br ng-show="($index + 1) % 8 == 0" />
    </div>
    <div ng-show="all_interests.length === undefined || all_interests.length === 0">
        There are currently no suggested interests..
    </div>
</div>